<template>
  <view class="flex flex-col flex-col-center-center">
    <tm-button @click="searchDyVideo" :width="500">查询所有抖音视频</tm-button>
    <view class="flex flex-between" style="width: 100%;">
      <tm-button size="small" color="red"
                 :disabled="checkedList.length === 0"
                 style="margin-left: 20px"
                 @click="deleteFile"
      >删除</tm-button>
      <tm-button size="small"
                 @click="batchCheck"
                 style="margin-right: 20px"
      >{{allChecked?'取消全选':'全选'}}</tm-button>
    </view>
  </view>
  <tm-text style="align-self: flex-end;margin-right: 20px" :font-size="30">已选中{{checkedList.length}}项</tm-text>
  <view v-for="(item,i) in files">
    <tm-checkbox v-model="item.checked" style="margin-left:10px !important;"/>
    <tm-card :status="format(new Date(item.lastModified()),'yyyy-MM-dd HH:mm:ss')"
             :title="(item.length() / 1024 / 1024).toFixed(2)+'MB'" content="" class="flex-video">
      <template v-slot:action>
        <text>{{item.getAbsolutePath()}}</text>
<!--    TODO:全部加载,性能超卡,暂时不知道如何解决    <video :src="item.getAbsolutePath()" controls="true"/>-->
      </template>
    </tm-card>
  </view>
</template>

<script>

// #ifdef APP
import {getFiles} from "@/common/file-android-origin";
// #endif
import {format} from 'date-fns'


export default {
  data() {
    return {
      format: format,
      qrcodeText: "",
      qrcodeHtml: "",
      files:[],
      // files: [{
      //   name: "xxx.mp4",
      //   length: () => {
      //     return 1024 * 1024
      //   },
      //   getAbsolutePath: () => {
      //     return "https://mailibao-exam.oss-cn-hangzhou.aliyuncs.com/20231228_095021.mp4"
      //   },
      //   getName: () => {
      //     return this.name
      //   },
      //   lastModified: () => {
      //     return 1704191820000
      //   },
      //   delete(){
      //     console.log('模拟删除')
      //   }
      // }, {
      //   name: "xxx.mp4",
      //   length: () => {
      //     return 1024 * 1024
      //   },
      //   getAbsolutePath: () => {
      //     return "https://mailibao-exam.oss-cn-hangzhou.aliyuncs.com/20231228_095021.mp4"
      //   },
      //   getName: () => {
      //     return this.name
      //   },
      //   lastModified: () => {
      //     return 1704191820000
      //   },
      //   delete(){
      //     console.log('模拟删除')
      //   }
      // }]
    }
  },
  mounted() {

  },
  computed: {
    allChecked() {
      return this.files.every(item => item.checked);
    },
    checkedList() {
      return this.files.filter(item => item.checked)
    }
  },
  methods: {
    batchCheck() {
      if(this.allChecked){
        for (let i = 0; i < this.files.length; i++) {
          this.files[i].checked = false
        }
      }else {
        for (let i = 0; i < this.files.length; i++) {
          this.files[i].checked = true
        }
      }
    },
    deleteFile(){
      if(this.checkedList.length > 0){
        uni.showModal({
          title: '提示',
          content: '确定要删除吗？',
          success: res => {
            console.log('res',res)
            if (res.confirm) {
              this.checkedList.forEach(item => {
                item.delete()
                this.files.splice(this.files.indexOf(item), 1)
              })
            }
          }
        })
      }
    },
    async searchDyVideo() {
      // TODO:找不到获取视频缩略图的,有办法获取BitMap 却没有办法使用他的Compress方法，不知道如何处理 https://www.cnblogs.com/tsuru/p/16996449.html
      // getVideoThumb('/storage/emulated/0/DCIM/Camera/share_5cc7701bdd0f1459b397f4af9a72cdbc.mp4')
      try {
        uni.$utils.loading("检索中")
        const files = await getFiles("/storage/emulated/0/DCIM/Camera")
        // 根据getName()过滤出文件名开头的share_的文件,用数组的filter
        const shareFiles = files.filter(file => file.getName().startsWith("share_"))
        // shareFies排序根据lastModified()
        this.files = shareFiles.sort((a, b) => b.lastModified() - a.lastModified())
      } finally {
        uni.$utils.closeLoading()
      }
    }
  }
}
</script>

<style scoped lang="scss">


</style>
